<style>
    .inbox_hand {
        cursor: pointer;
    }
    #inboxTpl .inbox_row {
        float: left;
        width: 100%;
        clear: both
    }
    #inboxTpl .inbox_body {
        float: left;
        width: 100% !important;
    }
    #inboxTpl .inbox_header {
        background: #005D8B;
        color: #fff;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 14px
    }
</style>
<div id="inboxTpl">
    <div class="inbox_row">
        <!-- header -->
        <div class="inbox_header">
            Inbox
            <i class="main_common_f_13_13 inbox_panel_resize right wp_mt_3 wp_mr_5 inbox_hand"></i>
        </div>
    </div>
    <!-- body -->
    <div class="inbox_row" id="inbox_entity">
        <div class="inbox_body" id="inbox_body" style="">
        </div>
    </div>
</div>
<script>
    var inbox = (function () {
        var pageTpl = $('#inboxTpl'),
            bodyTpl = $('#inbox_body'),
            entyTpl = $('#inbox_entity'),
            _height = Workport.utils.getViewPort().height,
            _min = true,   // if is min window
            _itemUrl = 'https://mail.cognizant.com',
            win = '',
            innerHtml = '<img src="imgs/Inbox small.png" alt="">' +
                    '<button id="login_button" type="button" class="k-button">Login</button>',
            _loginHeight = -(Workport.utils.getViewPort().height / 2 + 300);
        return{
            init: function () {
                bodyTpl.height(_height);
                // pageTpl.appendTo('#inbox');
                $('#inbox').html(pageTpl);
                $(".inbox_body").html(innerHtml);
                $('#login_button').css("margin-top", _loginHeight).css("margin-left", "105px").on({
                    click: function (e) {
                        inbox.switchMax();
                    }
                });
                //scroll in homepage
                HomePage_Scrollable.registerZoomCallback(6, inbox.switchMax, inbox.switchMin);
                $('.inbox_panel_resize').on({
                    click: function (e) {
                        if (_min) {
                            inbox.switchMax();
                        } else {
                            HomePage_Scrollable.zoom(6);
                            _min = true;
                        }
                    }
                });
            },
            switchMin: function () {
                $(".inbox_panel_resize").toggleClass("main_common_f_13_13 main_common_m_13_13");
                _min = true,
                bodyTpl.off('*'),
                bodyTpl.empty();
                $(".inbox_body").html(innerHtml);
                $('#login_button').css("margin-top", _loginHeight).css("margin-left", "102px").on({
                    click: function (e) {
                        inbox.switchMax();
                    }
                });
            },
            switchMax: function () {
                if (_min) {
                    _min = false;
                    $(".inbox_panel_resize").toggleClass("main_common_f_13_13 main_common_m_13_13");
                    HomePage_Scrollable.zoom(6);
                    var iframe = '<iframe id="inbox_iframe" width="100%" height="100%" frameborder="0" src="' + _itemUrl + '"></iframe>';
                    $(".inbox_body").html(iframe);
                    $("#inbox_body").css("overflow-y", "none");
                }
            }
        }
    })();
    inbox.init();
</script>